@media ( max-width 1023px )
  .search .navItem:not(#search-header)
    transform translateX(-100%)
    pointer-events none

@media ( min-width 769px ) and ( max-width 1023px )
  .up
    #search-header
      left calc(100vw - 238px)
    .search-popup
      left calc(100vw - 238px)
      right 0
      transform translateX(100%)
      &.open
        transform translateX(0)
  .navBtn
    left calc(238px + 1em)
  header
    clip-path polygon(0 0, 0 100%, 100vw 100%, 100vw 0)

@media ( min-width 1024px )
  nav.search,
  nav.search-moving
    overflow hidden
  .search .navItem:not(#search-header)
    transform translateX(100%)
    pointer-event none
  .search-popup
    right 0
    transform translateX(100%)
    &.open
      transform translateX(-6px)
  #search-header
    input
      padding 0 10px 0 0
    .navItemTitle
      right 10px
      &::before
        border-right 4px solid var(--theme-border-light)
        right 0
      &::after
        right 0
